<template>
  <div>
    <div class="ratingsContent border-top">
      <div class="itemWrap border-bottom"
           v-for="(item, index) of ratings"
           :key="index"
           v-show="changeType(item.rateType, item.text)">
        <div class="head"><img :src="item.avatar" alt=""></div>
        <div class="content">
          <div class="line">
            <p class="userName">{{item.username}}</p>
            <p class="time">{{time[index]}}</p>
          </div>
          <div class="starInfo">
            <Star class="star" :score="item.score"></Star><span class="arrivalTime" v-if="item.deliveryTime">{{item.deliveryTime}}分钟送达</span>
          </div>
          <div class="text" v-if="item.text">
            {{item.text}}
      </div>
          <div v-if="item.recommend.length">
            <i class="likeIcon iconfont icon-zan"></i>
            <span class="dishBox border" v-for="(i, index) of item.recommend" :key="index">{{i}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Star from '@/pages/common/Star.vue'
export default {
  name: 'RatingsContent',
  components: {
    Star
  },
  props: {
    ratings: Array
  },
  methods: {
    changeType (type, hasTxt) {
      let flag = true
      if (this.filterNoTxt && hasTxt === '') {
        flag = false
      }
      return (type === this.checkedIndex || this.checkedIndex === -1) & flag
    }
  },
  computed: {
    time () {
      let time = []
      this.ratings.forEach((value) => {
        let ms = value.rateTime
        let date = ''
        let year = ''
        let month = ''
        let day = ''
        date = new Date(ms)
        year = date.getFullYear()
        month = date.getMonth()
        day = date.getDate()
        time.push(year + '-' + month + '- ' + day)
      })
      return time
    },
    checkedIndex () {
      return this.$store.state.activeTypeIndex
    },
    filterNoTxt () {
      return this.$store.state.filterNoText
    }
  }
}
</script>

<style lang='scss' scoped>
  @import '~@/assets/style/common';
  .ratingsContent {
    background: #fff;
    padding: 36px;
    &.border-top::before {
      border-color: rgba(7, 17, 27, .1);
      border-width: 2px;
    }
    .itemWrap {
      display: flex;
      padding-top: 36px;
    }
    .head {
      img {
        height: 56px;
        width: 56px;
        margin-right: 24px;
        border-radius: 50%;
      }
    }
    .content {
      flex: 1;
      padding-bottom: 36px;
      &.border-bottom::before {
        border-color: rgba(7, 17, 27, .1);
      }
      .line {
        display: flex;
        justify-content: space-between;
        padding-bottom: 8px;
        .userName,
        .time {
          font-size: 20px;
          line-height: 24px;
        }
        .userName {
          color: rgb(7, 17, 27);
        }
      }
      .time {
        font-weight: 200;
        color: rgb(147, 153, 159);
        font-size: 20px;
      }
      .starInfo {
        font-size: 0;
        padding-bottom: 12px;
        .star {
          margin-right: 12px;
          font-size: 24px;/*px*/
        }
        .arrivalTime {
          @extend .time
        }
      }
      .text {
        padding-bottom: 16px;
        font-size: 24px;
        color: rgb(7, 17, 27);
        line-height: 36px;
      }
      .icon-zan {
        margin-right: 16px;
        font-size: 24px;
        color: #00a0dc;
        vertical-align: 6px;
      }
      .dishBox {
        display: inline-block;
        padding: 8px 12px;
        border-radius: 2px;
        color: rgb(147, 153, 159);
        font-size: 18px;/*px*/
        max-width: 124px;
        @include omit;
        &.border::before {
          border-color: rgba(7, 17, 27, .1);
        }
      }
    }
  }
</style>
